<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计面板 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .navbar-brand {
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,.06);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,.1);
        }
        .card-header {
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
            font-weight: 600;
        }
        .card-footer {
            border-bottom-left-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
        }
        .dashboard-card {
            position: relative;
            overflow: hidden;
        }
        .dashboard-card::before {
            content: '';
            position: absolute;
            top: -10px;
            right: -10px;
            background: rgba(255,255,255,0.15);
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .dashboard-card .card-title {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .dashboard-card .display-4 {
            font-weight: 600;
            font-size: 2.5rem;
        }
        .dashboard-card i.card-icon {
            font-size: 3rem;
            opacity: 0.2;
            position: absolute;
            bottom: 1rem;
            right: 1rem;
        }
        .table {
            background-color: white;
        }
        .table thead th {
            border-top: none;
            background-color: #f7f7f9;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .badge {
            padding: 0.5em 0.75em;
            font-weight: 500;
        }
        footer {
            background: linear-gradient(135deg, #343a40 0%, #212529 100%);
            letter-spacing: 1px;
        }
        .animate-number {
            animation: fadeInUp 1s ease-out;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane-departure mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 d-none d-lg-flex">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="快速搜索" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="text-dark"><i class="fas fa-tachometer-alt mr-2"></i>统计面板</h2>
            <div class="btn-group">
                <button type="button" class="btn btn-outline-primary"><i class="fas fa-download mr-1"></i> 导出报表</button>
                <button type="button" class="btn btn-outline-primary"><i class="fas fa-sync-alt mr-1"></i> 刷新数据</button>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-3">
                <div class="card dashboard-card bg-primary text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">航班总数</h5>
                        <h2 class="display-4 animate-number" th:text="${flightCount}">100</h2>
                        <i class="fas fa-plane card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="/flightbooking/flights">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card dashboard-card bg-success text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">旅客总数</h5>
                        <h2 class="display-4 animate-number" th:text="${passengerCount}">350</h2>
                        <i class="fas fa-users card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="/flightbooking/passengers">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card dashboard-card bg-warning text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">机票总数</h5>
                        <h2 class="display-4 animate-number" th:text="${ticketCount}">500</h2>
                        <i class="fas fa-ticket-alt card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="/flightbooking/tickets">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card dashboard-card bg-info text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">总收入</h5>
                        <h2 class="display-4 animate-number">
                            <span th:text="${#numbers.formatDecimal(totalRevenue, 0, 'COMMA', 0, 'POINT')}">￥125000</span>
                        </h2>
                        <i class="fas fa-yen-sign card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="#">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <i class="fas fa-chart-bar text-primary mr-1"></i>
                        热门航线统计
                    </div>
                    <div class="card-body">
                        <canvas id="popularRoutesChart" width="100%" height="40"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <i class="fas fa-chart-pie text-primary mr-1"></i>
                        机票状态分布
                    </div>
                    <div class="card-body">
                        <canvas id="ticketStatusChart" width="100%" height="40"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <i class="fas fa-chart-line text-primary mr-1"></i>
                        月度销售趋势
                    </div>
                    <div class="card-body">
                        <canvas id="monthlySalesChart" width="100%" height="30"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-table text-primary mr-1"></i>
                                最近交易记录
                            </div>
                            <div>
                                <input type="text" class="form-control form-control-sm" placeholder="搜索交易...">
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>票号</th>
                                        <th>航班号</th>
                                        <th>旅客</th>
                                        <th>行程</th>
                                        <th>购票时间</th>
                                        <th>金额</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="ticket : ${recentTickets}">
                                        <td th:text="${ticket.ticketId}">1</td>
                                        <td th:text="${ticket.flightId}">CA1234</td>
                                        <td th:text="${ticket.passenger != null ? ticket.passenger.name : '未知'}">张三</td>
                                        <td th:text="${ticket.flight != null ? ticket.flight.departureCity + ' → ' + ticket.flight.arrivalCity : '未知'}">北京 → 上海</td>
                                        <td th:text="${#dates.format(ticket.purchaseDate, 'yyyy-MM-dd HH:mm')}">2023-07-01 08:00</td>
                                        <td th:text="${ticket.actualPrice + '元'}">1200.00元</td>
                                        <td>
                                            <span th:if="${ticket.status == '已预订'}" class="badge badge-pill badge-warning">已预订</span>
                                            <span th:if="${ticket.status == '已出票'}" class="badge badge-pill badge-success">已出票</span>
                                            <span th:if="${ticket.status == '已取消'}" class="badge badge-pill badge-danger">已取消</span>
                                            <span th:if="${ticket.status == '已退票'}" class="badge badge-pill badge-secondary">已退票</span>
                                            <span th:if="${ticket.status == '已使用'}" class="badge badge-pill badge-info">已使用</span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="#" class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="#" class="btn btn-outline-secondary btn-sm">
                                                    <i class="fas fa-print"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr th:if="${#lists.isEmpty(recentTickets)}">
                                        <td colspan="8" class="text-center py-5">
                                            <i class="fas fa-inbox fa-3x text-muted mb-3 d-block"></i>
                                            <p class="text-muted">暂无交易记录</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>显示 1 到 10 条，共 <span th:text="${recentTickets != null ? recentTickets.size() : 0}">10</span> 条记录</div>
                            <nav>
                                <ul class="pagination pagination-sm mb-0">
                                    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center text-md-left">
                    <h5>航空订票系统</h5>
                    <p class="text-muted">提供高效便捷的航班订票管理解决方案</p>
                </div>
                <div class="col-md-6 text-center text-md-right">
                    <p class="mb-0">© 2025 航空订票系统 - JZA04</p>
                    <p class="text-muted small">版本 v1.0.0</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 使用Chart.js创建图表
        document.addEventListener('DOMContentLoaded', function() {
            // 设置全局Chart.js选项
            Chart.defaults.global.defaultFontFamily = 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
            Chart.defaults.global.defaultFontSize = 12;
            Chart.defaults.global.defaultFontColor = '#666';
            Chart.defaults.global.legend.position = 'bottom';
            Chart.defaults.global.animation.duration = 1500;
            Chart.defaults.global.animation.easing = 'easeInOutQuart';
            
            // 热门航线图表
            var popularRoutesCtx = document.getElementById('popularRoutesChart');
            var popularRoutesChart = new Chart(popularRoutesCtx, {
                type: 'bar',
                data: {
                    labels: ['北京→上海', '上海→广州', '广州→深圳', '深圳→北京', '成都→重庆', '重庆→西安'],
                    datasets: [{
                        label: '票务数量',
                        backgroundColor: [
                            'rgba(78, 115, 223, 0.7)',
                            'rgba(78, 115, 223, 0.6)',
                            'rgba(78, 115, 223, 0.5)',
                            'rgba(78, 115, 223, 0.4)',
                            'rgba(78, 115, 223, 0.3)',
                            'rgba(78, 115, 223, 0.2)'
                        ],
                        borderColor: 'rgba(78, 115, 223, 1)',
                        borderWidth: 1,
                        data: [65, 59, 80, 81, 56, 55]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: false
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            },
                            gridLines: {
                                color: "rgba(0, 0, 0, 0.05)",
                                zeroLineColor: "rgba(0, 0, 0, 0.1)"
                            }
                        }]
                    }
                }
            });

            // 机票状态分布图表
            var ticketStatusCtx = document.getElementById('ticketStatusChart');
            var ticketStatusChart = new Chart(ticketStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['已预订', '已出票', '已取消', '已退票', '已使用'],
                    datasets: [{
                        backgroundColor: [
                            'rgba(255, 193, 7, 0.8)',
                            'rgba(40, 167, 69, 0.8)',
                            'rgba(220, 53, 69, 0.8)',
                            'rgba(108, 117, 125, 0.8)',
                            'rgba(23, 162, 184, 0.8)'
                        ],
                        borderColor: '#fff',
                        borderWidth: 2,
                        data: [15, 40, 5, 10, 30]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutoutPercentage: 65,
                    legend: {
                        position: 'bottom'
                    }
                }
            });

            // 月度销售趋势图表
            var monthlySalesCtx = document.getElementById('monthlySalesChart');
            var monthlySalesChart = new Chart(monthlySalesCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    datasets: [{
                        label: '销售额',
                        lineTension: 0.3,
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        borderColor: 'rgba(40, 167, 69, 1)',
                        pointRadius: 3,
                        pointBackgroundColor: 'rgba(40, 167, 69, 1)',
                        pointBorderColor: '#fff',
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(40, 167, 69, 1)',
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        data: [25000, 20000, 35000, 30000, 40000, 45000, 55000, 60000, 45000, 35000, 30000, 25000]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: true
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: function(value) {
                                    return '￥' + value;
                                }
                            },
                            gridLines: {
                                color: "rgba(0, 0, 0, 0.05)",
                                zeroLineColor: "rgba(0, 0, 0, 0.1)"
                            }
                        }]
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, chart) {
                                return '销售额: ￥' + tooltipItem.yLabel;
                            }
                        }
                    }
                }
            });
            
            // 数字动画效果
            const animateNumbers = () => {
                document.querySelectorAll('.animate-number').forEach(el => {
                    const target = parseInt(el.textContent.replace(/[^0-9]/g, ''));
                    const duration = 1500;
                    const step = Math.ceil(target / (duration / 30)); // 30ms per step
                    let current = 0;
                    
                    const timer = setInterval(() => {
                        current += step;
                        if (current >= target) {
                            el.textContent = target;
                            clearInterval(timer);
                        } else {
                            el.textContent = current;
                        }
                    }, 30);
                });
            };
            
            // 页面加载后执行动画
            setTimeout(animateNumbers, 300);
        });
    </script>
</body>
</html> 